<template>
  <div id="scroll-board">
    <div @click="mockingShow" class="ranking-board-title">
      监控路段：{{ curpartner.partnerName }}，今日数据
    </div>
    <div class="charts">
      <div ref="echartsContainer" style="width: 100%; height: 500px"></div>
    </div>

    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="650px"
      :close-on-click-modal="false"
      :before-close="(e) => (dialogVisible = false)"
    >
      <el-form ref="ruleForm" :model="form" label-width="80px">
        <el-form-item prop="name" label="类型">
          <el-radio-group v-model="form.type">
            <el-radio-button label="入口"></el-radio-button>
            <el-radio-button label="出口"></el-radio-button>
          </el-radio-group>
        </el-form-item>
        <el-form-item prop="name" label="类型">
          <el-date-picker
            v-model="form.datetime"
            type="datetime"
            placeholder="选择日期时间"
          >
          </el-date-picker>
        </el-form-item>

        <el-form-item prop="count" label="数量">
          <el-input
            placeholder="请输入数量"
            maxlength="12"
            v-model="form.count"
          ></el-input>
        </el-form-item>

        <div class="dialog-btns">
          <el-button @click="dialogVisible = false" size="medium"
            >关闭</el-button
          >
          <el-button type="primary" @click="mockingApi" size="medium"
            >新增</el-button
          >
        </div>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { mocking } from "@/api/videos/monitorPartners";
export default {
  name: "ScrollBoard",
  props: {
    datas: {
      type: Array,
      default: () => [],
    },
    curpartner: {
      type: [Object, String],
    },
  },
  data() {
    return {
      dialogVisible: false,
      title: "",
      form: {
        ip: "",
        count: "",
        datetime: "",
        type: "入口",
      },
    };
  },
  mounted() {
    this.draw();
    this.title = `测试使用-${this.curpartner.partnerName}`;
  },
  methods: {
    mockingApi() {
      let { enterCameraIp, outCameraIp } = this.curpartner;
      let { type, count, datetime } = this.form;
      if (!/^[1-9]\d*$/.test(count)) {
        this.$message.error("请输入整数");
        return;
      }
      if (!datetime) {
        this.$message.error("请输入选择时间");
        return;
      }
      let ip = type == "入口" ? enterCameraIp : outCameraIp;
      mocking({
        unitip: ip,
        datetime,
        count,
      }).then((res) => {});
    },
    mockingShow() {
      this.dialogVisible = true;
    },
    draw() {
      var myChart = echarts.init(this.$refs.echartsContainer);
      let xData = [];
      for (let index = 0; index < 24; index++) {
        xData.push(`${index + 1}时`);
      }
      let option = {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          textStyle: {
            color: "#fff",
          },
          data: ["入口", "出口"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: true,
          data: xData,
          nameTextStyle: {
            color: "#fff", // 红色
          },
        },
        yAxis: {
          type: "value",
          nameTextStyle: {
            color: "#ff0", // 红色
          },
        },
        series: this.datas,
      };
      myChart.setOption(option);
    },
  },
};
</script>

<style lang="less">
#scroll-board {
  box-sizing: border-box;
  margin-left: 20px;
  height: 100%;
  overflow: hidden;
  border-top: 2px solid rgba(1, 153, 209, 0.5);
  .ranking-board-title {
    font-weight: bold;
    height: 50px;
    display: flex;
    align-items: center;
    font-size: 20px;
    cursor: pointer;
  }
}
</style>
